<template>
  <div class="GloudWarehouse">
    <h4>云仓管理</h4>
    <div class="cus-tabs-style">
      <div class="key-search clearfix">
        <div class="floatfix">
          <el-input
            v-model="keySearch"
            suffix-icon="el-icon-search"
            clearable
            placeholder="输入关键词搜索"
          />
          <el-button type="primary" @click="loadding">确认</el-button>
          <el-button
            type="primary"
            @click="
              $router.push({
                name: 'AddGloudWarehouse',
                query: {
                  p:$ed({
                    state: 'add'
                  })
                }
              })
            "
          >添加云仓</el-button>
        </div>
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        height="600"
        :data="Bindata"
        class="cus-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="云仓名称" prop="name" align="center" />
        <el-table-column label="地址" prop="addressDetail" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="operation">
              <el-button
                type="text"
                @click="handelInventory(scope.row)"
              >库存管理</el-button>|
              <el-button
                type="text"
                @click="
                  $router.push({
                    name: 'EditGloudWarehouse',
                    query: {
                      p:$ed({
                        state: 'edit', row: scope.row
                      }
                      )}
                  })
                "
              >编辑</el-button>|
              <el-button
                type="text"
                @click="handelRemove([scope.row.id])"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div class="footer-left">
          <el-button
            plain
            size="small"
            type="primary"
            @click="$refs.table.toggleAllSelection()"
          >全选</el-button>
          <el-button
            plain
            size="small"
            type="danger"
            @click="handelAllDel"
          >删除</el-button>
        </div>
        <el-pagination
          class="pagination-right"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pages.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pages.pageSize"
          :total="pages.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
/** 云仓管理 */
import {
  gloudWarehouseList,
  gloudWarehouseDel
} from '@/api/customAPI/shop/GloudWarehouse'
export default {
  name: 'GloudWarehouse',
  data() {
    return {
      loading: false,
      Bindata: [],
      keySearch: '',
      pages: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      selectList: []
    }
  },
  created() {},
  activated() {
    this.loadding()
  },
  mounted() {
    this.loadding()
  },
  methods: {
    loadding() {
      this.loading = true
      gloudWarehouseList({
        keySearch: this.keySearch || '',
        shopId: localStorage.getItem('shopId'),
        page: this.pages.pageIndex,
        limit: this.pages.pageSize
      })
        .then(result => {
          this.Bindata = result.data.data.data
          this.pages.total = result.data.data.total
          this.loading = false
        })
        .catch(e => {
          this.loading = false
          console.info(e)
        })
    },
    handelInventory(row) {
      /* sessionStorage.setItem('warehouseId', row.id)*/
      this.$router.push({
        name: 'InventoryManagement',
        query: {
          p: this.$ed({
            cloudId: row.id,
            name: row.name,
            addressDetail: row.addressDetail
          })
        }
      })
    },
    handelAllDel() {
      if (this.selectList.length == 0) {
        return this.$message.error('请选择需要删除的云仓')
      } else {
        this.$confirm('你确定要删除吗？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(result => {
            gloudWarehouseDel(this.selectList)
              .then(result => {
                this.$message.success('成功')
                this.loadding()
              })
              .catch(() => {})
          })
          .catch(() => {
            return this.$message.info('已取消删除')
          })
      }
    },
    handelRemove(id) {
      this.$confirm('你确定要删除吗？', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(result => {
          gloudWarehouseDel(id)
            .then(result => {
              this.$message.success('成功')
              this.loadding()
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    handleSelectionChange(e) {
      this.selectList = e.map(item => item.id)
    },
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.loadding()
    },
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.loadding()
    },
    handleTabClidk(tab) {
      console.log(tab)
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.GloudWarehouse {
  padding: 50px 100px;
  .cus-tabs-style {
    .key-search {
      width: 100%;
      .floatfix {
        float: right;
        .el-input {
          width: 220px;
        }
      }
    }
    .cus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cus-table {
      margin-top: 40px;
      .operation {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0px auto;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    margin: 50px 0px 100px 0px;
    .footer-left {
      ::v-deep.el-button {
        width: 100px;
        margin: 0px;
      }
    }
  }
}
</style>
